<template>
  <div class="directory">
    <el-collapse accordion>
      <el-collapse-item :name="item.course_id" v-for="(item, index) in directoryList" :key="index">
        <template slot="title">
          <el-tag size="mini" :class="courseTypeClass[item.course_type]" effect="dark">{{
            item.course_type_text
          }}</el-tag>
          <div
            class="title"
            :class="{
              active: getCurrentPlayCourseid === item.course_id
            }"
          >
            {{ item.title }}
          </div>
        </template>
        <VideoDirectory :courseId="item.course_id" :detailInfo="detailInfo"></VideoDirectory>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import VideoDirectory from './videoDirectory'
export default {
  components: {
    VideoDirectory
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      directoryList: [],
      courseTypeClass: {
        1: 'video',
        2: 'live',
        3: 'multipart',
        4: 'classes'
      }
    }
  },
  computed: {
    ...mapGetters({
      getCurrentPlayCourseid: 'course/getCurrentPlayCourseid'
    })
  },
  created() {
    // 获取目录
    this.$api.getCourseClassesMenu(this.$route.params.id, res => {
      this.directoryList = res.data
    })
  }
}
</script>

<style lang="scss" scoped>
.directory {
  .el-tag {
    margin-right: 10px;
    &.video {
      background-color: #ff8a8a;
      border-color: #ff8a8a;
    }
    &.live {
      background-color: #67c23a;
      border-color: #67c23a;
    }
    &.multipart {
      background-color: #80ccff;
      border-color: #80ccff;
    }
    &.classes {
      background-color: #ff8a52;
      border-color: #ff8a52;
    }
  }
  .title {
    @include ellipsis();
    &.active {
      @include edu-color-auxiliary;
    }
  }
  ::v-deep .el-collapse {
    border-top: none;
    border-bottom: none;
    .el-collapse-item__header,
    .el-collapse-item__wrap {
      background-color: transparent;
      border-bottom: none;
    }
    .el-collapse-item__header {
      color: #fff;
      padding: 0 0 0 5px;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
  }
}
</style>
